<template>
  <el-card>
    <el-form :inline="true" :model="searchFilter" class="table-toolbar" size="small" style="margin-bottom: 16px;">
      <el-form-item label="商品名称"><el-input v-model="searchFilter.name" placeholder="请输入商品名称" clearable /></el-form-item>
      <el-form-item label="所属批次">
        <el-select v-model="searchFilter.batch" placeholder="请选择所属批次" clearable style="width: 180px;">
          <el-option v-for="batch in batchOptions" :key="batch" :label="batch" :value="batch" />
        </el-select>
      </el-form-item>
      <el-form-item><el-button @click="onSearch">搜索</el-button></el-form-item>
    </el-form>

    <div v-if="activeTab === 'pending'" style="margin-bottom: 12px;">
      <el-button type="success" size="small" :disabled="!selection.length" @click="handleBatchApprove">批量通过</el-button>
      <el-button type="danger" size="small" :disabled="!selection.length" @click="handleBatchReject">批量驳回</el-button>
    </div>

    <el-tabs v-model="activeTab">
      <el-tab-pane label="待审核" name="pending"></el-tab-pane>
      <el-tab-pane label="已通过" name="approved"></el-tab-pane>
      <el-tab-pane label="未通过" name="rejected"></el-tab-pane>
    </el-tabs>
    <el-table :data="paginatedProducts" border stripe @selection-change="onSelectionChange">
      <el-table-column v-if="activeTab === 'pending'" type="selection" width="55" />
      <el-table-column prop="name" label="商品名称" width="200"></el-table-column>
      <el-table-column prop="mainImage" label="主图" width="80">
        <template #default="scope"><el-image :src="scope.row.mainImage" style="width:60px;height:60px;object-fit:cover;" /></template>
      </el-table-column>
      <el-table-column prop="price" label="价格(円)" width="100"></el-table-column>
      <el-table-column prop="batch" label="所属批次" width="120"></el-table-column>
      <el-table-column prop="status" label="申请状态" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.status === '上架' ? 'success' : 'info'">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="applicant" label="申请人" width="120"></el-table-column>
      <el-table-column prop="applyTime" label="申请时间" width="160"></el-table-column>
      <el-table-column v-if="activeTab !== 'pending'" prop="auditTime" label="审核时间" width="160"></el-table-column>
      <el-table-column v-if="activeTab === 'rejected'" prop="rejectReason" label="驳回理由"></el-table-column>
      <el-table-column label="操作" width="150" v-if="activeTab === 'pending'">
        <template #default="scope">
          <el-button size="small" type="success" @click="handleApprove(scope.row)">通过</el-button>
          <el-button size="small" type="danger" @click="handleReject(scope.row)">驳回</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 16px; justify-content: flex-end"
      :current-page="pagination.currentPage"
      :page-size="pagination.pageSize"
      :page-sizes="[5, 10, 20, 50]"
      :total="filteredProducts.length"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import dayjs from 'dayjs';

const activeTab = ref('pending');
const searchFilter = ref({ name: '', batch: '' });
const selection = ref<any[]>([]);
const pagination = ref({
  currentPage: 1,
  pageSize: 5
});

const allProducts = ref([
  // 待审核
  { id: 1, name: '【待审核】高达模型', mainImage: 'https://dummyimage.com/60x60/f56c6c/fff&text=待审', price: 1500, status: '上架', applicant: '张三', applyTime: '2024-06-10 09:00', auditStatus: 'pending', batch: '2025-07活动' },
  { id: 2, name: '【待审核】初音手办', mainImage: 'https://dummyimage.com/60x60/f56c6c/fff&text=待审', price: 1200, status: '下架', applicant: '李四', applyTime: '2024-06-10 10:00', auditStatus: 'pending', batch: '2025-07活动' },
  { id: 5, name: '【待审核】新款相机', mainImage: 'https://dummyimage.com/60x60/f56c6c/fff&text=待审', price: 8000, status: '上架', applicant: '小明', applyTime: '2024-06-11 11:00', auditStatus: 'pending', batch: '2025-08活动' },
  { id: 6, name: '【待审核】限量版球鞋', mainImage: 'https://dummyimage.com/60x60/f56c6c/fff&text=待审', price: 2500, status: '上架', applicant: '小红', applyTime: '2024-06-11 12:00', auditStatus: 'pending', batch: '2025-08活动' },
  { id: 7, name: '【待审核】智能手表', mainImage: 'https://dummyimage.com/60x60/f56c6c/fff&text=待审', price: 1800, status: '下架', applicant: '小刚', applyTime: '2024-06-12 14:00', auditStatus: 'pending', batch: '2025-09活动' },
  { id: 8, name: '【待审核】游戏主机', mainImage: 'https://dummyimage.com/60x60/f56c6c/fff&text=待审', price: 4000, status: '上架', applicant: '小华', applyTime: '2024-06-12 15:00', auditStatus: 'pending', batch: '2025-09活动' },
  // 已通过
  { id: 3, name: '【已通过】Switch卡带', mainImage: 'https://dummyimage.com/60x60/67c23a/fff&text=通过', price: 6000, status: '上架', applicant: '王五', applyTime: '2024-06-09 14:00', auditStatus: 'approved', auditTime: '2024-06-09 15:00', batch: '2025-06活动' },
  // 未通过
  { id: 4, name: '【未通过】违规商品', mainImage: 'https://dummyimage.com/60x60/909399/fff&text=驳回', price: 9999, status: '上架', applicant: '赵六', applyTime: '2024-06-08 11:00', auditStatus: 'rejected', auditTime: '2024-06-08 12:00', rejectReason: '商品信息不符合规定', batch: '2025-06活动' }
]);

const batchOptions = computed(() => {
  const batches = allProducts.value
    .filter(p => p.auditStatus === 'pending' && p.batch)
    .map(p => p.batch);
  return [...new Set(batches)];
});

watch(activeTab, () => {
  pagination.value.currentPage = 1;
});

const filteredProducts = computed(() => {
  let list = allProducts.value.filter(p => p.auditStatus === activeTab.value);
  if (searchFilter.value.name) {
    list = list.filter(p => p.name.toLowerCase().includes(searchFilter.value.name.toLowerCase()));
  }
  if (searchFilter.value.batch) {
    list = list.filter(p => p.batch && p.batch.includes(searchFilter.value.batch));
  }
  return list;
});

const paginatedProducts = computed(() => {
  const start = (pagination.value.currentPage - 1) * pagination.value.pageSize;
  const end = start + pagination.value.pageSize;
  return filteredProducts.value.slice(start, end);
});

function onSearch() {
  pagination.value.currentPage = 1;
}

function onSelectionChange(val: any[]) {
  selection.value = val;
}

function handleSizeChange(val: number) {
  pagination.value.pageSize = val;
  pagination.value.currentPage = 1; // size变化时回到第一页
}

function handleCurrentChange(val: number) {
  pagination.value.currentPage = val;
}

function handleApprove(row: any) {
  ElMessageBox.confirm('确定要通过该商品的审核吗？', '提示', { type: 'success' }).then(() => {
    row.auditStatus = 'approved';
    row.auditTime = dayjs().format('YYYY-MM-DD HH:mm');
    ElMessage.success('审核已通过');
  });
}

function handleReject(row: any) {
  ElMessageBox.prompt('请输入驳回理由', '驳回审核', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputType: 'textarea'
  }).then(({ value }) => {
    row.auditStatus = 'rejected';
    row.auditTime = dayjs().format('YYYY-MM-DD HH:mm');
    row.rejectReason = value;
    ElMessage.warning('审核已驳回');
  });
}

function handleBatchApprove() {
  ElMessageBox.confirm(`确定要批量通过选中的 ${selection.value.length} 个商品的审核吗？`, '提示', { type: 'success' }).then(() => {
    selection.value.forEach(row => {
      row.auditStatus = 'approved';
      row.auditTime = dayjs().format('YYYY-MM-DD HH:mm');
    });
    ElMessage.success('批量审核已通过');
    selection.value = [];
  });
}

function handleBatchReject() {
  ElMessageBox.prompt('请输入批量驳回理由', '批量驳回审核', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputType: 'textarea'
  }).then(({ value }) => {
    selection.value.forEach(row => {
      row.auditStatus = 'rejected';
      row.auditTime = dayjs().format('YYYY-MM-DD HH:mm');
      row.rejectReason = value;
    });
    ElMessage.warning('批量审核已驳回');
    selection.value = [];
  });
}
</script> 